import React, { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import Breadcrumb from '../components/common/Breadcrumb';
import BackToTop from '../components/common/BackToTop';
import { projects } from '../data/projects';
import './ProjectDetailPage.css';

const ProjectDetailPage = () => {
  const { projectId } = useParams();
  const [project, setProject] = useState(null);
  const [loading, setLoading] = useState(true);
  const [relatedProjects, setRelatedProjects] = useState([]);
  
  useEffect(() => {
    // 查找当前项目
    const currentProject = projects.find(p => p.id === projectId);
    
    if (currentProject) {
      setProject(currentProject);
      
      // 查找相关项目（同类别，但不包括当前项目）
      const related = projects
        .filter(p => p.category === currentProject.category && p.id !== projectId)
        .slice(0, 3);
      
      setRelatedProjects(related);
    }
    
    setLoading(false);
    
    // 滚动到页面顶部
    window.scrollTo(0, 0);
  }, [projectId]);

  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  if (loading) {
    return (
      <div className="loading-container">
        <div className="loader"></div>
      </div>
    );
  }

  if (!project) {
    return (
      <div className="container">
        <div className="error-container">
          <h2>项目未找到</h2>
          <p>抱歉，我们无法找到您请求的项目。</p>
          <Link to="/portfolio" className="btn btn-primary">
            返回作品集
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="project-detail-page">
      <Breadcrumb customPaths={['portfolio', project.title]} />
      
      <motion.div 
        className="container"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        <motion.div className="project-header" variants={itemVariants}>
          <h1 className="project-title">{project.title}</h1>
          <div className="project-tags">
            {project.tags.map((tag, index) => (
              <span key={index} className="project-tag">{tag}</span>
            ))}
          </div>
        </motion.div>
        
        <motion.div className="project-showcase" variants={itemVariants}>
          <img 
            src={project.images[0]} 
            alt={project.title} 
            className="project-main-image"
          />
        </motion.div>
        
        <div className="project-content-grid">
          <motion.div className="project-description" variants={itemVariants}>
            <h2>项目概述</h2>
            <p>{project.description}</p>
            <div className="project-long-description" 
              dangerouslySetInnerHTML={{ __html: project.longDescription.replace(/\n/g, '<br>') }} 
            />
          </motion.div>
          
          <motion.div className="project-details" variants={itemVariants}>
            <div className="details-card">
              <h3>项目详情</h3>
              <div className="detail-item">
                <span className="detail-label">客户</span>
                <span className="detail-value">{project.client}</span>
              </div>
              <div className="detail-item">
                <span className="detail-label">完成日期</span>
                <span className="detail-value">{project.date}</span>
              </div>
              <div className="detail-item">
                <span className="detail-label">分类</span>
                <span className="detail-value">{project.category}</span>
              </div>
              {project.url && (
                <div className="detail-item">
                  <span className="detail-label">项目链接</span>
                  <a href={project.url} target="_blank" rel="noopener noreferrer" className="detail-link">
                    访问项目
                  </a>
                </div>
              )}
            </div>
          </motion.div>
        </div>
        
        {project.images.length > 1 && (
          <motion.div className="project-gallery" variants={itemVariants}>
            <h2>项目图片</h2>
            <div className="gallery-grid">
              {project.images.map((image, index) => (
                <div key={index} className="gallery-item">
                  <img src={image} alt={`${project.title} - 图片 ${index + 1}`} />
                </div>
              ))}
            </div>
          </motion.div>
        )}
        
        {relatedProjects.length > 0 && (
          <motion.div className="related-projects" variants={itemVariants}>
            <h2>相关项目</h2>
            <div className="related-projects-grid">
              {relatedProjects.map(relatedProject => (
                <div key={relatedProject.id} className="related-project-card">
                  <div className="related-project-image">
                    <img src={relatedProject.thumbnail} alt={relatedProject.title} />
                    <div className="related-project-overlay">
                      <Link to={`/portfolio/${relatedProject.id}`} className="related-project-link">
                        查看详情
                      </Link>
                    </div>
                  </div>
                  <h3 className="related-project-title">{relatedProject.title}</h3>
                </div>
              ))}
            </div>
          </motion.div>
        )}
        
        <motion.div className="project-navigation" variants={itemVariants}>
          <Link to="/portfolio" className="back-to-portfolio">
            ← 返回作品集
          </Link>
        </motion.div>
      </motion.div>
      
      <BackToTop />
    </div>
  );
};

export default ProjectDetailPage;
